<template>
  <div>
    <div class="header">
      <!--头部-->
      <div style="display:flex">
        <!--返回功能-->
      <div style="width: 10%" @click="goBack">返回</div>
      <div style="width: 90%; text-align:center">{{filmInfo.name}}</div>
      </div>
      <div>
        <img :src="filmInfo.poster" width="100%" height="300" alt="">
      </div>
    </div>

    <div class="detail">
      <div style="display:flex">
        <div>{{filmInfo.name}}</div>
        <div>{{filmInfo.grade}}</div>
      </div>
     <div>{{filmInfo.category}}</div>
     <div>{{filmInfo.premiereAt | parseTime}} 上映</div>
     <div>{{filmInfo.nation}} | {{filmInfo.runtime}} 分钟</div>
     <div>{{filmInfo.synopsis}}</div>
    </div>
    <div class="photos1">
      <!--图片区域  演职人员-->
      <div>演职人员:</div>
          <div>
            <!-- 在这里输出可以滑动的图片信息 -->
              <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in filmInfo.actors" :key="item.name">
          <img :src="item.avatarAddress" alt="" width="85"/>
          <!--写代码仔细点啊item ，都能写到ietm 找半天-->
          <div>{{item.name}}</div>
          <div>{{item.role}}</div>
                    </div>
                </div>
              </div>
        </div>
    </div>

     <div class="photos2">
      <!--图片区域  剧照-->
    </div>
  </div>
</template>

<script>
import uri from "@/config/uri";
//导入moment组件。这个是解析时间戳的
import moment from "moment";
//导入相关的swiper组件
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";

export default {
  data () {
    return {
      filmInfo: {}
    }
  },
  //获取数据
  created(){
    //通知事件中心去隐藏底部导航
   // this.$eventBus.$emit("toggleFooter",false);
   //vuex修改数据源
   this.$store.commit("common/setIsShow",false);

    //获取电影的id号(获取时参数名称要与路由规则中声明一致)
    let filmId = this.$route.params.film_id
    this.$http.get(uri.getDetail + "?filmId=" + filmId).then((ret) =>{
      //console.log(ret.data.film);
      this.filmInfo = ret.data.film
      //产生滑动的图片分页组
      this.$nextTick(() =>{
      new Swiper(".swiper-container", {
        slidesPerView: 4,
        spaceBetween: 30,
      });
      })
    })
  },
  beforeDestroy() {
    //在将要离开这个组件时通知事件中心将底部导航放出来
    //this.$eventBus.$emit("toggleFooter",true)

    this.$store.commit("commit/setIsShow",true)
  },
  methods: {
    //返回上一页
    goBack(){
      this.$router.go(-1)
    }
  },
  //过滤器
  filters:{
    //修饰上映时间
    parseTime(timestamp) {
      //momedt作为js包这里时间戳处理单位是毫秒
      return moment(timestamp*1000).format("YYYY/MM/DD")
    }
  }
}
</script>

<style>

</style>